<template>
 <div>


     <banner :sightName="sightName" :bannerImg="bannerImg" :gallaryImgs="gallaryImgs"></banner>
     <list :list="list"></list>
   
     <div class="content"></div>
       <headerp></headerp>
 </div>
</template>

<script>
import banner from './components/bannner'
import list from './components/list'
import headerp from './components/header'
import axios from 'axios'
 export default {
   name:"Detail",
   data () {
     return {
       sightName:"",
       bannerImg:"",
       gallaryImgs:[],
        list:[
        ]
     }
   },
   components: {
    banner,
    list,
    headerp
   },
   mounted (){
     this.getDetailInfo()
   },
   methods :{
     getDetailInfo () {
       axios.get('/api/detail.json',{
         params:{
           id:this.$route.params.id
         }
       }).then(this.handleGetDataSucc)
     },
     handleGetDataSucc(res){
       res = res.data
       if(res.ret && res.data){
        const data = res.data
        console.log(data)
        this.sightName = data.sightName
         this.bannerImg = data.bannerImg
          this.gallaryImgs = data.gallaryImgs
             this.list = data.categoryList
       }
     }
   }
 }
</script>

<style>
  .content{
    height: 50rem;
  }
 
</style>
